<template>
  <div
    v-if="visible"
    v-bind="$attrs"
    class="w-full h-full px-4"
    :class="[prefixCls, { 'special-user': isSpecialUser }]"
    :style="getWrapStyle"
  >
    <div ref="spinRef" class="h-full" v-loading="loading" :loading-tip="loadingTip">
      <div class="detail-bg w-full h-full mb-2">
        <slot></slot>
      </div>

      <div class="w-full fixed right-0 bottom-0 bg-white pl-4 shadow-footer" :style="getFootStyle">
        <div class="h-full flex justify-start items-center" v-if="!$slots.footer">
          <a-button type="primary" ghost @click="handleBack">返回</a-button>
        </div>

        <slot name="footer" v-else></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import type { CSSProperties } from 'vue';
  import { defineComponent, computed, ref, unref } from 'vue';
  import { useAppInject } from '/@/hooks/web/useAppInject';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
  import { useUserStoreWithOut } from '/@/store/modules/user';

  const props = {
    loading: { type: Boolean },
    loadingTip: { type: String },
    visible: { type: Boolean },
    footerHeight: { type: Number, default: 72 },
  };

  export default defineComponent({
    name: 'BasicDetail',
    inheritAttrs: false,
    props,
    emits: ['close'],
    setup(props, { emit }) {
      const spinRef = ref<ElRef>(null);
      const heightRef = ref(window.innerHeight);

      const { getIsMobile } = useAppInject();
      const { getCalcContentWidth } = useMenuSetting();
      const { prefixCls } = useDesign('basic-detail');
      const { headerHeightRef } = useLayoutHeight();
      const userStore = useUserStoreWithOut();

      const top = headerHeightRef.value;
      heightRef.value = window.innerHeight - top - props.footerHeight;

      const getWrapStyle = computed((): CSSProperties => {
        const style: CSSProperties = {};
        style.height = `${unref(heightRef)}px`;
        return style;
      });

      const isSpecialUser = computed(() => userStore.getSpecialUser);

      const getFootStyle = computed((): CSSProperties => {
        const style: CSSProperties = {};
        style.width =
          unref(getIsMobile) || unref(isSpecialUser) ? '100%' : unref(getCalcContentWidth);
        style.height = `${props.footerHeight}px`;
        return style;
      });

      console.log('heightRef', heightRef.value, getWrapStyle.value);

      const handleBack = (e: MouseEvent) => {
        emit('close', e);
      };
      return {
        spinRef,
        getWrapStyle,
        getFootStyle,
        prefixCls,
        handleBack,
        isSpecialUser,
      };
    },
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-basic-detail';
  .@{prefix-cls} {
    .detail-bg {
      background-color: #fcfcfc;
      border-radius: 4px 4px 0 0;
    }

    .shadow-footer {
      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.05);
    }

    &.special-user {
      padding: 0;
    }
  }
</style>
